@use "theme/globals" as *;

:host {
    .addon-messages-conversation-item,
    .addon-message-discussion {
        ion-label {
            margin-right: 0;
            margin-left: 0;
        }

        .item-heading {
            core-format-text {
                font-weight: bold;
            }

            ion-icon {
                @include margin-horizontal(2px, null);
            }
        }

        ion-note {
            display: flex;
            flex-direction: column;
            align-self: flex-start;
            @include margin-horizontal(2px, null);

            ion-badge, ion-icon {
                margin-top: 3px;
                align-self: flex-end;
            }
            .addon-message-last-message-date {
                white-space: nowrap;
                font-size: #{dynamic-font(11px)};
            }
        }

        .addon-message-last-message {
            display: flex;
            justify-content: flex-start;
        }

        .addon-message-last-message-user {
            white-space: nowrap;
            color: var(--ion-text-color);
            @include margin-horizontal(null, 2px);
        }

        .addon-message-last-message-text {
            @include ellipsis();
            flex-shrink: 1;
        }
    }

    .addon-message-discussion {
        .item-heading {
            margin-top: 10px;
        }
    }

    ion-item-divider ion-badge {
        margin-left: 16px;
        margin-right: 16px;
    }
}
